Einstieg Spiele-Programmierung Workshop 

1 Miau Spiele-App 

1.1 Interaktiver Sound 

Tippe den folgenden Code ab, speichere und teste ihn: 

function love . load () 

sound = love . audio . newSource ( "meowl.ogg" ) 
end 

function love . mousepressed () 
sound : play () 
end 

Der Code in love.loadO ladt eine Sounddatei, love .mousepressedO spielt diese ab, wenn ein 
Mausknopf gedriickt oder der Touchscreen beriihrt wird. 

1.2 Interaktive Bilder 

Erganze love.loadO nrit dem Laden zweier Bilder: 

bild_auf = love . graphics . newlmage ( "open. png" ) 
bild_zu = love . graphics . newlmage ( "closed. png" ) 

Frige folgende zwei Funktionen zu Deinern Code hinzu: 

function love . update () 
bild_aktuell = bild_zu 

if sound : isPlaying () then bild_aktuell = bild_auf end 
end 

function love.drawO 

love . graphics . draw ( bild_aktuell , 0, 0 ) 
end 

love .update () berechnet, welches der Bilder das aktuelle ist. love.drawO zeichnet dieses. Beide 
Funktionen arbeiten 60 nral je Sekunde. Das Bild passt nicht ganz aber darum kummern wir uns spater. 

1.3 Zufallige Miau Sounds 

Erganze love.loadO nrit folgender Liste bzw. Tabelle an Sounds und Zufallszahlengenerator-Initiator: 
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math . randomseed ( os .time () ) 

Ersetze den Inhalt von love. update O nrit Code, welcher die Soundliste benutzt: 

bild_aktuell = bild_zu 

for i,u in pairs ( soundliste ) do 

if u : isPlaying () then bild_aktuell = bild_auf end 
end 

Ersetze den Inhalt von love .mousepressedO nrit Code, welcher zufallige Sounds abspielt: 

wahl = math . random ( 1 , 5) 
soundliste [wahl] : stop () 
soundliste [wahl] :play() 
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1.4 Anpassung an verschiedene Bildschirme 

Erganze den Inhalt von love. load () mit Berechnungen der Verhaltnisse der Fenster- zu Bildgrofien: 

fx = love . graphics . getWidth () / 1024 
fy = love . graphics . getHeight () / 600 

Erganze den love . graphics . draw() Funktionsaufruf in love.drawO mit Skalier-Parametern: 
love . graphics . draw (bild_aktuell , 0, 0, 0, fx , fy) 

Das Bild wird dadurch an die Bildschirmgrofie angepasst skaliert dargestellt, da Handys/Tablets nur 
eine Auflosung unterstiitzen. Dies ist zwar nicht optimal aber eine einfache Losung fiir den Anfang. 

1.5 Android-Port 

Wenn Du Lust hast, eigene Grafiken (Du kannst am Computer oder auf Papier rnalen) oder eigene 
Sounds in Deine Miau Spiele-App einzubauen, gebe den Workshopleiterinnen Bescheid. Du kannst auch 
das App-Icon andern. 

Wir empfehlen zu programmieren, dass der "Zuruck"-Knopf die Android-App schliefit: 

function love . keypressed ( key ) 

if key == "escape" then love . event . quit () end 
end 

Urn die App auf Android spielbar zu rnachen, muss ein Zip-Archiv von dem Spiel erstellt werden, es 
muss in game. love umbenannt werden und ins Projektverzeichniss gelegt werden. Dann muss das Skript 
mit make-apk ini Namen benutzt werden. Die resultierende game.apk muss dann aufs Handy/Tablet 
kopiert und dort installiert werden. Lass Dir von Workshopleiterinnen helfen. 

2 Katz und Maus Spiele-App 

2.1 Bild und Sound 

Tippe den folgenden Code ab (ohne — Kommentare), speichere und teste ihn: 

function love . load () 

math . randomseed ( os .time () ) -- Fur Zuf all s zahl en 

love . window . setMode ( 1280, 720) -- Andert Bil ds chirmgr 6 fi e 

grasBild = love .graphics .newlmage ( "gras. png" ) 
katzeBild = love . graphics . newlmage ( "katze.png" ) 
mausBild = love . graphics . newlmage ( "maus. png" ) 
katzeX = 400 -- Position der Katze 

katzeY = 300 

mausX = 300 -- Position der Maus 

mausY = 150 

musik = love . audio . newSource ( "musik.ogg" ) 
musik : setLooping ( true ) 
musik : play ( ) 
end 

function love.drawO 

love . graphics . draw ( grasBild, 0,0) 
love . graphics . draw ( katzeBild, katzeX, katzeY ) 
love . graphics . draw ( mausBild, mausX, mausY ) 
end 

Der Code in love. load () verandert die Fensterauflosung, ladt Bilder und Musik, setzt 
Positions- Variablen und spielt die Musik. love.drawO malt die Bilder, 60 mal je Sekunde. Sie passen 
nicht ganz aber darurn kummern wir uns spater. 
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2.2 Automatische und Interaktive Bewegung 

Erganze love. load () mit Mausklick-Positions-Variablen und Sounds: 

1 klickX = 400 

2 klickY = 300 

3 quietsch = love . audio . newSource ( " quietsch . ogg " ) 

4 miau = love . audio . newSource ( "miau.ogg" ) 

Frige folgende drei Funktionen zu Deinem Code hinzu: 

1 function distanz ( xl , yl , x2 , y2 ) 

2 a = xl - x2 

s b = yl - y2 

4 return ( math.sqrt( a~2 + b~2 ) ) 

5 end 

6 

7 function love . update () 

8 mausX = mausX + 7 

9 if mausX > 800 then 

10 mausX = -48 

n mausY = math. random ( 20, 400 ) 

12 end 

13 if distanz ( katzeX , katzeY , mausX , mausY ) < 40 then 

14 quietsch : play () 

is mausX = 999 

16 end 

17 if distanz ( katzeX , katzeY , klickX , klickY ) > 8 then 
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25 end 

26 end 

27 

28 function love . mousepressed ( x, y ) 

29 klickX = x 

30 klickY = y 

31 miau : play () 

32 end 

Die Funktion distanz () berechnet den Abstand zwischen zwei Punkten mithilfe des Satzes des 
Pythagoras bzw. der Formel c = V a 2 + b 2 . 

love .update () 1. Bewegt die Mans, 2. Setzt die Maus zuriick, wenn sie liber den rechten Rand lauft 
oder 3. wenn Katze und Maus sich beriihren, 4. Bewegt die Katze. 

Der Code in love .mousepressedO verandert die klickX und klickY Variablen jedes Mai, wenn ein 
Mausknopf oder der Touchscreen beriihrt wird. 
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2.3 Bildschirmgrofie 

Erganze den Inhalt von love. load () mit Berechnungen der Verhaltnisse der Fenster- zu Bildgrofien: 

fx = love . graphics . getWidth () / 800 

fy = love . graphics . getHeight () / 450 

Erganze die love. graphics. draw() Funktionsaufrufe in love.drawO mit Skalier-Parametern: 
love . graphics . draw ( grasBild , 0, 0, 0, fx , fy ) 

love . graphics . draw ( katzeBild , katzeX * fx , katzeY * fy , 0, f x , fy ) 
love . graphics . draw ( mausBild , mausX * f x , mausY * fy , 0, f x , fy ) 

Ersetze die Variablenzuweisungen in love .mousepressedO , um vom Bildschirm aufs Spielefeld zu 
projezieren: 

klickX = x/fx 
klickY = y/fy 

2.4 Punkte und Zeit 

Erganze den Inhalt von love. load () mit Bildgrofien, Schrift-Einstellung, Zeit und Punkten: 

breite = love . graphics . getWidth () 
hoehe = love . graphics . getHeight () 
love . graphics . setNewFont (hoehe/15) 
zeitStart = lo ve . t imer . getTime ( ) 
zeit = 30 
punkte = 0 

Erganze den Inhalt von love. update!) mit einer Zeitberechnung: 

zeit = 30 - math . f loor ( love . t imer . getTime ( ) - zeitStart) 

Erganze den if-Block in love. update!), der auf Katz-Maus Beriihrungen reagiert, mit einer 
Punkte-Hochrechnung: 

if zeit > 0 then 

punkte = punkte + 1 
end 

Erganze den Inhalt von love. draw!), sodass Zeit und Punkte angezeigt werden: 

text = "Zeit : " . . zeit . . ", Punkte : " . . punkte 

love . graphics . printf !text , 0, 0, breite, "center") 

Du solltest den Inhalt von love, update!) in einen if zeit > 0 then ... end -Block packen, 
um das Spiel nach Zeitablauf anzuhalten. Du kannst einen ahnlichen Block in love. draw!) verwenden, 
um eine "Game Over!" Nachricht anzuzeigen. 

2.5 Android-Port 

Siehe Abschnitt 1.5. 
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3 Matrix-Musik DJ-App 

Tippe den folgenden Code ab (ohne — Kommentare), speichere und teste ihn: 

function love . load () 

la, lg = love. audio, love . graphics 

math . randomseed ( os .time () ) -- Fur Zufallszahlen 

namen = { "lead", "drums", " drumsb " , "clap" } 
instr = {{},{}} -- Instrumente-Tabelle mit... 

for i = 1 , 2 do -- Zwei Zeilen und. . . 

for j = 1, #namen do -- Vier Spalten 

instr [i] [ j ] = {} 

instr [i][j].snd = la.newSource ( namen [j] .. i .. ".ogg" ) 

instr [i] [j] . snd : setLooping ( true ) -- Endlosschleife an 

instr [i] [j ]. snd : setVolume ( 0 ) -- Lautst arke auf 0 

instr [i] [j] ,snd:play() -- Tracks werden ab g esp i el t 

instr [i][j].farbe = { 60*j, math.random(200), 200 } 
end 
end 

spalten, zeilen = #instr[l] , #instr -- ^ Spalten, 2 Zeilen 

breit , hoch = lg . getWidth () , lg . getHeight () -- Bildschirm-Grojie 

feldb , feldh = breit / spalten, hoch / zeilen -- Schaltf elder -Grofie 

end 

function love.drawQ 

for i, zeile in ipairs ( instr ) do -- i ist Index, zeile ist Wert 
for j, instrument in ipair s ( ze ile ) do 

lg . setColor ( instrument . farbe ) -- Instrumente haben eigene Farben 

lg . rectangle ( "fill", (j-1) * feldb, ( i — 1 ) * feldh, feldb, feldh ) 

if instrument . snd : getVolume () == 1 then 

lg.setColor( 255, 255, 255, 95 ) -- An/Aus -Zustand wird gezeigt 

lg. circle ( "fill", (j-0.5) * feldb, (i-0.5) * feldh, feldb*0.4 ) 
end 
end 
end 
end 

function love . mousepressed (x , y) -- Wird von Maus/Touchscreen gestartet 
wob = math.ceilC x / feldb ) -- Sp alt enb er echnung 

woh = math.ceilC y / feldh ) -- Zeil enb er echnung 

if instr [woh] [wob] . snd : getVolume () == 1 then 

instr [woh] [wob] . snd : setVolume (0) -- Lautst arke 0% 

else 

instr [woh] [wob] . snd : setVolume (1) -- Lautstarke 100 % 

end 
end 

Der Code macht intensiven Gebrauch von Tabellen/Listen und f or-Schleifen, sowie von 
mathematischen Berechnungen, die etwas langsamer verdaut werden sollten. Wende Dich gerne an 
Workshopleiterinnen mit Fragen. 

3.1 Android-Port 

Siehe Abschnitt 1.5. 
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4 Nachwort 



LOVE malt Bilder und Figuren mithilfe von Positionen in einem Koordinatensystem, welches in der 
linken oberen Ecke beginnt und sich nach unten und rechts hin ausbreitet. 

LOVE ist die Spiele-Engine, die in diesem Workshop verwendet wird. Mehr Informationen zur 
Programmierung mit LOVE gibt es auf love2d.org/wiki/love . 

Weiteres Workshop-Material ist auf espws.de verfiigbar. 




©2015 Iwan Gabovitch, Einstieg Spiele-Programmierung Workshop. 

Dieses Dokument ist lizenziert unter einer Attribution- Share Alike 4-0 International Public Lizenz. 
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